<template>
  <van-grid :column-num="6">
    <van-grid-item icon="photo-o" text="牌堆" v-for="i in 3" >
      <van-image
          src="https://img2.baidu.com/it/u=1254672238,1423772385&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
      />
    </van-grid-item>
  </van-grid>
  <van-row justify="center">
    <van-col span="6" @click="抽牌">
      <van-image
          src="http://qiniu.xinyanyima.tech/cardyy/%E5%8D%A1%E8%83%8C.jpg"
      />
    </van-col>
  </van-row>
  <van-grid :column-num="3" style="height: 20px;width: 70vw">
    <van-grid-item icon="photo-o" text="牌堆" @click="召唤" >
      <van-image
          src="http://qiniu.xinyanyima.tech/cardyy/%E5%8D%A1%E8%83%8C.jpg"
      />
    </van-grid-item>
    <van-grid-item v-for="item in model.英雄队列" >
      <van-image
          :src="item"
      />
    </van-grid-item>
  </van-grid>

  <van-grid :column-num="6" style="position: fixed;bottom: 10px">
    <van-grid-item icon="photo-o" text="手牌" v-for="item in model.手牌" >
      <van-image
          :src="item"
      />
    </van-grid-item>
  </van-grid>
  <Box替换英雄 ref="ref替换英雄" @onSelected="选中替换的英雄"></Box替换英雄>
</template>

<script setup>
import Box替换英雄 from "./box替换英雄.vue";
import {reactive,getCurrentInstance} from "vue";

const {proxy} = getCurrentInstance();
const 基础牌 = {
      战士:'http://qiniu.xinyanyima.tech/cardyy/TW28B%20%2828%29.jpg',
      法师:'http://qiniu.xinyanyima.tech/cardyy/TW28B%20%2818%29.jpg',
    }
const 手牌 = {
  战士:'http://qiniu.xinyanyima.tech/cardyy/TW28B%20%2828%29.jpg',
  法师:'http://qiniu.xinyanyima.tech/cardyy/TW28B%20%2818%29.jpg',
}
const 洗牌 = (牌组) => {
  //洗牌
  for (let i = 0; i < 牌组.length; i++) {
    const index = Math.floor(Math.random() * 牌组.length);
    const temp = 牌组[i];
    牌组[i] = 牌组[index];
    牌组[index] = temp;
  }
}

    const model = reactive({
        中央牌堆:[],
        英雄牌堆:[基础牌.战士,基础牌.战士,基础牌.战士,基础牌.战士,基础牌.战士,基础牌.战士,基础牌.战士,基础牌.法师,基础牌.法师,基础牌.法师],
        英雄弃牌堆:[],
        英雄队列:[],
        手牌:[],
        攻击牌堆:[],
        当前英雄数上限:3,
    })

const 初始化 = () => {
  model.中央牌堆 = [];
  for (let i = 0; i < 20; i++){
    for (const item in  手牌) {
      model.中央牌堆.push(手牌[item])
    }
  }
  洗牌(model.英雄牌堆);
}
初始化();

const 召唤 = () => {
  if(model.英雄队列.length>=model.当前英雄数上限){
    if(model.英雄牌堆.length === 0 && model.英雄弃牌堆.length === 0){
      alert('没有可以召唤的英雄')
      return;
    }
    if(model.英雄牌堆.length === 0){
      console.log('重新新牌')
      model.英雄牌堆 = [...model.英雄弃牌堆]
      洗牌(model.英雄牌堆);
    }

    proxy.$refs.ref替换英雄.open(model.英雄队列);
    return;
  }

    model.英雄队列.push(model.英雄牌堆.pop())
}
const 抽牌 = () => {
  model.手牌.push(model.中央牌堆.pop())
}

const 选中替换的英雄 = (index) => {
  model.英雄弃牌堆.push(model.英雄队列[index])
  model.英雄队列.splice(index,1,model.英雄牌堆.pop())
}

</script>

<style scoped>

</style>
